<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/index.css">
<style>
	html, body, #app {
		width: 100%;
		height: 100%;
		background-color: aliceblue;
		font-size: 20px;
	}
	.flex-container {  
	display: flex;  
	align-items: center; /* 垂直居中 */  
	justify-content: center; /* 水平居中，可选 */  
	height: 100px; /* 或者其他高度 */  
	}
	.d1{
		width: 99%;
		height: 20%;
		font-size: 30px;
	}
	.d2{
		width: 99%;
		height: 60%;
		margin-top: 15px;
	}
	.d3{
		width: 99%;
		height: 14%;
		margin-top: 25px;
	}
	.f1{
		float: left;
	}
	.c1{
		height: 100%;
		width: 22%;
		margin-right: 3.8%;
	}
	.cc1{
		height: 100%;
		width: 22%;
	}
	.c2{
		width: 70%;
		height: 60%;
		position: absolute;
		z-index:10;	
	}
	.cc2{
		width: 70%;
		height: 60%;
		position: absolute;
		z-index:9;
		background-color: absolute;
	}
	.c3{
		width: 28.6%;
		height: 100%;
		margin-left: 1%;
	}
	.c4{
		width: 100%;
        height: 100%;
	}
	.s1{
		display: block;
		width: 48px;
		height: 48px;
		background: url("../../../upload/1.png");
	}
	.s2{
		display: block;
		width: 48px;
		height: 48px;
        background: url("../../../upload/2.png");
    }
	.s3{
		display: block;
		width: 48px;
		height: 48px;
        background: url("../../../upload/3.png");
    }
	.e1{
		position: relative;
		top: -10px;
	}
	.f2{
		float: right;
	}
	.p1{
		position: relative;
		top: 48px;
	}
	.s4{
		padding-left: 20px;
		font-family: '微软雅黑';
	}
	.d4{
		width: 100%;
		height: 20%;
		margin-bottom: 70px;
		margin-top: 20px;
	}

	
</style>
</head>
<body>
<div id="app">
	<div class="d1">
		<el-card class="box-card f1 c1">
			<span class="s1"></span><p>用户总人数:<span class="s4">{{ sum?.[0] }}&nbsp;&nbsp;人</span></p>
		</el-card>
		<el-card class="box-card f1 c1">
			<span class="s2"></span><p>总销售额:<span class="s4">￥{{ sum?.[1] }}</span></p>
		</el-card>
		<el-card class="box-card f1 c1">
			<span class="s3"></span><p>总订单量:<span class="s4">{{ sum?.[2] }}&nbsp;&nbsp;单</span></p>
		</el-card>
		<el-card class="box-card f1 cc1">
			<p class="f1 p1">退款率:</p>
			<el-progress type="circle" :percentage="num" class="e1 f2"></el-progress>
		</el-card>
	</div>
		
	<div class="d2">
		<el-card class="box-card c2" id="main1">
				</el-card>
		<el-card class="box-card cc2" id="main2">
				</el-card>
			<el-card class="box-card f2 c3">
				<div class="d4">
				<el-radio-group v-model="radio">
					<el-radio :label="1" id="radio3">销售额</el-radio>
					<el-radio :label="2" id="radio4">销售趋势</el-radio>
				  </el-radio-group></div>

				<div class="d4">
				<el-radio-group v-model="radio1" @change="rtwo">
					<el-radio :label="3">年销售额</el-radio>
					<el-radio :label="4">月销售额</el-radio>
					<el-radio :label="5">季度销售额</el-radio>
					</el-radio-group></div>

				  <div class="d4">输入年份：<el-input
					type="text"
					placeholder="请输入内容"
					v-model="text"
					maxlength="4"
					style="width: 200px;"
					show-word-limit
					></div>

					<div class="d4">
						<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
					</div>
			</el-card>
	</div>

	<div class="d3">
		<el-card class="box-card c4">
				
		</el-card>
	</div>
</div>
<script src="../../js/vue.js"></script>
<script src="../js/index.js"></script>
<scrip src="../../js/jquery.js"></scrip>
<script src="../js/echarts.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>
<script>
let app = new Vue({
	el: '#app',
	data: {
		sum:[],
		num:0,
		monthdata:[],
		monthnum:['1','2','3','4','5','6','7','8','9','10','11','12'],
		yeardata:[],
		yearnum:['2020','2021','2022','2023','2024'],
		jddata:[],
		jdnum:['1','2','3','4'],
		year:'2024',
		xnum1:['1','2','3','4','5','6','7','8','9','10','11','12'],
		data:[],

		radio: 1,
		radio1:4,
		text: ''
	},
	methods: {
      //获取数据
      getdataL(){
    	  axios.post("../../orderController/getdataL").then(resp=>{
    		  this.sum = resp.data.split(":");
    		  this.num = Number(this.sum[3]);
    	  });
      },
      //获取今年12个月的订单数量
      getmonth(){
        	axios.post("../../orderController/getmonth", qs.stringify({
        		year:this.year
        	})).then(resp=>{
        		this.monthdata = resp.data;
        		if(this.data == ''){
        			this.data = this.monthdata;
        		}
        	});
        },
      //获取近5年，销售额
      getyear(){
        	axios.post("../../orderController/getyear").then(resp=>{
        		this.yeardata = resp.data;
        	});
        },
      //获取每年季度
      getjd(){
        	axios.post("../../orderController/getjd", qs.stringify({
        		year:this.year
        	})).then(resp=>{
        		this.jddata = resp.data;
        	});
        },
		rtwo(){
			if(this.radio1 == 3){
				//年
				this.xnum1 = this.yearnum;
				this.data = this.yeardata;
			}else if(this.radio1 == 4){
				//月
				this.xnum1 = this.monthnum;
				this.data = this.monthdata;
			}else{
				//季度
				this.xnum1 = this.jdnum;
				this.data = this.jddata;
			}
		},
		search(){
			if(this.text == ''){
				this.year = '2024';
			}else{
				this.year = this.text;
			}
			
			setTimeout(() => {
				if(this.radio1 == 3){
					this.data = this.yeardata;
				}else if(this.radio1 == 4){
					this.data = this.monthdata;
				}else{
					this.data = this.jddata;
				}
			}, 600);
		}
	},
	created(){
		this.getdataL();
	},
	computed: {
		chartOptions(){
			return {
					  xAxis: {
					    type: 'category',
					    data: this.xnum1
					  },
					  yAxis: {
					    type: 'value'
					  },
					  series: [
					    {	itemStyle : { normal: {label : {show: true}}},
					      data: this.data.map(item => item.b),
					      type: 'bar'
					    }
					  ]
					};
		},
		chartOptions2(){
			return {
					  xAxis: {
					    type: 'category',
					    data: this.xnum1
					  },
					  yAxis: {
					    type: 'value'
					  },
					  series: [
					    {	itemStyle : { normal: {label : {show: true}}},
					      data: this.data.map(item => item.b),
					      type: 'line'
					    }
					  ]
					};
		},
	},
	mounted(){
		var chartDom = document.getElementById('main1');  
	    var myChart = echarts.init(chartDom);  
	    myChart.setOption(this.chartOptions);  
	  
	    // 使用 $watch 监听 chartOptions 的变化  
	    this.$watch('chartOptions', (newOptions) => {  
	      myChart.setOption(newOptions);  
	    }, { deep: true });
	  
	    // 第二个图表的初始化  
	    var chartDom2 = document.getElementById('main2');  
	    var myChart2 = echarts.init(chartDom2);  
	    myChart2.setOption(this.chartOptions2); // 注意这里使用 myChart2 而不是 myChart1  
	  
	    // 第二个图表的 $watch  
	    this.$watch('chartOptions2', (newOptions) => {  
	      myChart2.setOption(newOptions);  
	    }, { deep: true });
	    
	    this.getmonth();
	    this.getyear();
	    this.getjd();
	    
	    setInterval(()=>{
		    this.getmonth();
		    this.getyear();
		    this.getjd();
		    this.getdataL();
        },500);
	}
});
</script>
<script>
	let a = document.getElementById("main1");
	let b = document.getElementById("main2");
	let radio3 = document.getElementById("radio3");
	let radio4 = document.getElementById("radio4");
	radio3.onclick = function(){
		a.style.zIndex = 10;
		b.style.zIndex = 9;
	}
	radio4.onclick = function(){
        b.style.zIndex = 10;
        a.style.zIndex = 9;
    }
</script>
</body>
</html>